<template>
  <view class="container">
    <uni-nav-bar
      :fixed="true"
      :border="false"
      :statusBar="true"
      background-color="rgba(0, 0, 0, 1)"
    ></uni-nav-bar>
    <view class="cart-top">
      <view class="cart-top-l">
        购物车
      </view>
      <view class="cart-top-r">
        <text
          class="cart-top-r-over"
          v-if="setStatus"
          @click="setFun(false)"
        >完成</text>
        <text
          class="cart-top-r"
          v-else
          @click="setFun(true)"
        >编辑</text>
      </view>

    </view>
    <!-- 购物车列表 -->
    <view
      class="cart-list"
      v-if="cartList.length>0"
    >
      <!-- 按商家分组 -->
      <view
        v-for="(shop, shopIndex) in cartList"
        :key="shopIndex"
        class="shop-group"
      >
        <!-- 商家信息 -->
        <!-- 商家标题 -->
        <view class="shop-title">
          <view class="shop-title-title">
            <i class="iconfont icon-ds-shop" />&nbsp;{{shop.goodsTypeName}}
          </view>
          <!-- 右箭头图标 -->
          <!-- <image src="@/static/img/godtail.png" mode="widthFix" class="arrow-icon"></image> -->
        </view>
        <view
          class=""
          v-for="(item, itemIndex) in shop.goods"
          :key="itemIndex"
        >
          <view class="shop-header">
            <!-- 商家选择框 -->
            <view
              class="checkbox"
              @click="toggleShopSelect(shopIndex,itemIndex)"
            >
              <view
                v-if="item.check"
                class="checkbox-icon"
              >✔</view>
            </view>
            <view
              class="shop-name"
              @click="goPage('/page_home/planDetail?id='+item.id)"
            >
              <view class="shop-name-title">
                {{ item.name }}
              </view>
              <!-- 右箭头图标 -->
              <image
                src="@/static/img/godtail.png"
                mode="widthFix"
                class="arrow-icon"
              ></image>
            </view>
          </view>
          <!-- 商品列表 -->
          <view
            class="cart-item"
            v-for="(group, groupIndex) in item.selectedSpecificationGroups"
            :key="groupIndex"
          >
            <!-- 商品选择框 -->
            <view
              class=""
              style="width: 50rpx;"
            >

            </view>
            <!-- <view class="checkbox" @click="toggleItemSelect(shopIndex, itemIndex,groupIndex)">
							<view v-if="group.check" class="checkbox-icon">✔</view>
						</view> -->
            <!-- 商品图片 -->
            <image
              :src="host+item.icon"
              mode="aspectFill"
              class="product-image"
            ></image>
            <!-- 商品信息 -->
            <view class="product-info">
              <text
                class="product-title"
                style="font-size:24rpx"
              >{{group.specificationCondition}}</text>
              <view class="product-info-div">
                <view class="">
                  <view
                    class="product-title product-title-color over-list"
                    v-for="item,index in group.specificationItemGroup"
                    :key="index"
                  >
                    {{ item.name }}-{{ item.itemName }}
                  </view>
                </view>
                <view class="">
                  <view class="product-price"><text class="price-icon">￥</text><text
                      class="plan-price-text"
                    >{{ group.currentUnitPrice }}</text> </view>
                  <!-- 数量操作 -->
                  <view class="quantity-control">
                    <button
                      class="quantity-btn minus"
                      :disabled="group.amount<1"
                      @click="changeQuantity(shopIndex, itemIndex,groupIndex, -1)"
                    >-</button>
                    <text class="quantity">{{ group.amount }}</text>
                    <button
                      class="quantity-btn minus"
                      :disabled="group.amount>=group.stock"
                      @click="changeQuantity(shopIndex, itemIndex,groupIndex, 1)"
                    >+</button>
                  </view>
                </view>
              </view>
              <view class="product-info-box">
                <view class="">
                  <!-- <view class="product-price-low">省0.16元 </view> -->
                  <!-- <view class="product-price-low">{{item.region}}</view> -->

                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <sunui-template
      v-else
      title="快去添加商品吧"
    />
    <view v-show="cartList.length>0">
      <!-- 底部结算栏-编辑 -->
      <view
        class="footer"
        v-if="setStatus"
      >
        <!-- 全选 -->
        <view
          class="select-all"
          @click="toggleSelectAll"
        >
          <view class="checkbox">
            <view
              v-if="isAllSelected"
              class="checkbox-icon"
            >✔</view>
          </view>
          <view class="checkbox-txt">全选</view>
        </view>
        <!-- 结算按钮 -->
        <view
          class="submit-btn"
          @click="delFun"
        >删除 {{totalDelNum>0?totalDelNum:''}}</view>
      </view>
      <!-- 底部结算栏-支付 -->
      <view
        class="footer1"
        v-show="!setStatus"
      >
        <!-- <view class="footer1-box-l">
					<view class="footer1-box-l-b" v-if="contactArr.length==0" @click="goContact">
						联系人：暂无联系人
						<image src="@/static/img/godtail.png" mode="widthFix" class="arrow-icon"></image>
					</view>
					<view class="footer1-box-l-b" v-else>
						联系人：
						<uniPicker ref="uniPicker" class="pickerBox" @p="pBtn" /> &nbsp;
					</view>
				</view> -->

        <view class="footer1-box-b">
          <!-- 全选 -->
          <view
            class="select-all"
            @click="toggleSelectAll"
          >
            <view class="checkbox">
              <view
                v-if="isAllSelected"
                class="checkbox-icon"
              >✔</view>
            </view>
            <view class="checkbox-txt">全选</view>
          </view>
          <!-- 总价 -->
          <view class="total-price">
            合计：
            <view class="product-price">￥<text class="plan-price-text">{{ totalPrice }}</text>
            </view>
          </view>
          <!-- 结算按钮 -->
          <view
            class="submit-btn btn-class"
            @click="submit"
          >去结算</view>
        </view>
      </view>
    </view>

    <!-- #ifdef MP-WEIXIN -->
    <get-number v-if="login_status===1" />
    <!-- #endif -->
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import uniPicker from '@/components/uni_picker/uni_picker.vue'
export default {
  components: {
    uniPicker,
  },
  data() {
    return {
      setStatus: false,
      // 购物车数据（按商家分组）
      cartList: [],
      contactArr: [],
      // cartList: [
      //   {
      //     name: '商家1',
      //     check: false,
      //     items: [
      //       {
      //         image: 'https://img01-gms.17zwd.com/imgextra01/61336614/i2/515677600375505480.jpg',
      //         title: '商品1',
      //         price: 99.99,
      //         quantity: 1,
      //         check: false
      //       },
      //       {
      //         image: 'https://img01-gms.17zwd.com/imgextra01/61336614/i2/515677600375505480.jpg',
      //         title: '商品2',
      //         price: 89.99,
      //         quantity: 1,
      //         check: false
      //       }
      //     ]
      //   },
      //   {
      //     name: '商家2',
      //     check: false,
      //     items: [
      //       {
      //         image: 'https://qcloud.dpfile.com/pc/As5tfeAJ3bNz0EHihrTx4WJThVNQ8kb0ttUPBSmOWSUDY_ZFhBScrG7sKiYM3WjS.jpg',
      //         title: '商品3',
      //         price: 79.99,
      //         quantity: 1,
      //         check: false
      //       },
      //       {
      //         image: 'https://qcloud.dpfile.com/pc/As5tfeAJ3bNz0EHihrTx4WJThVNQ8kb0ttUPBSmOWSUDY_ZFhBScrG7sKiYM3WjS.jpg',
      //         title: '商品4',
      //         price: 69.99,
      //         quantity: 1,
      //         check: false
      //       }
      //     ]
      //   }
      // ],
      // 是否全选
      isAllSelected: false,

      paramObj: {
        name: '',
      },
    }
  },
  computed: {
    ...mapGetters(['login_status', 'userInfo', 'configObj']),
    // 计算总价-保留 方便后期查看
    // totalPrice() {
    // 	return this.cartList
    // 		.reduce((total, shop) =>
    // 			shop.goods.map((row) =>
    // 				row.selectedSpecificationGroups.filter((item) =>
    // 					item.check
    // 				).reduce((shopTotal, item) => shopTotal + item.currentUnitPrice * item.amount, 0)
    // 			).reduce((shopTotal, item) => shopTotal + item, 0), 0);
    // },
    totalPrice() {
      // Decimal: 加 add, 减 sub, 乘 mul, 除 div, 求余 modulo
      const Decimal = this.$Decimal
      let price = new Decimal(0)
      let num = new Decimal(0)
      return this.cartList.reduce((total, shop) => {
        let num1 = shop.goods
          .map((row) =>
            row.selectedSpecificationGroups
              .filter((item) => item.check)
              .reduce((shopTotal, item) => {
                var shopTotal = new Decimal(shopTotal)
                let currentUnitPrice = new Decimal(item.currentUnitPrice)
                let amount = new Decimal(item.amount)
                let num1 = currentUnitPrice.mul(amount).toNumber()
                num1 = new Decimal(num1)
                return shopTotal.add(num1).toNumber()
              }, 0)
          )
          .reduce((shopTotal, item) => {
            return shopTotal + item
          })
        num1 = new Decimal(num1)
        num = num.add(num1).toNumber()
        num = new Decimal(num)
        return num
      }, 0)
      return num
    },
    // 计算选中的个数
    totalDelNum() {
      return this.cartList.reduce(
        (total, shop) =>
          shop.goods
            .filter((item) => item.check)
            .reduce(
              (shopTotal, item, currentIndex) => total + currentIndex + 1,
              0
            ),
        0
      )
    },
    // totalPrice() {
    //   return this.cartList
    //     .reduce((total, shop) => {
    //       return (
    //         total +
    //         shop.goods
    //           .filter((item) => item.check)
    //           .reduce((shopTotal, item) => shopTotal + item.price * item.quantity, 0)
    //       );
    //     }, 0);
    // }
  },
  onReady() {
    this.$bus.$on('refreshPeople', (e) => {
      this.userDetail()
    })
  },
  async onShow() {
    // 初始化
    this.init()
    this.userDetail()
    this.isAllSelected = false
  },
  methods: {
    //初始化方法
    async userDetail() {
      var that = this
      var data = {}
      const { contactsList } = await this.$apiFun.getApi(
        this.$api.userDetailApi,
        data
      )

      let contactArr = contactsList.map((item) => {
        return {
          id: item.realname,
          name: item.realname,
        }
      })
      if (contactArr.length > 0) {
        this.contactArr = contactArr
        this.paramObj.name = contactArr[0].name
        this.$nextTick(() => {
          this.$refs['uniPicker'].changeShow({
            array: contactArr,
            id: contactArr[0].name,
          })
        })
      }
    },
    pBtn(e) {
      this.paramObj.name = e.name
    },
    async init() {
      let data = await this.$apiFun.getApi(this.$api.goodsGroupListApi)
      data.forEach((item) => {
        item.goods.forEach((row) => {
          row.check = false
          row.selectedSpecificationGroups.forEach((list) => {
            list.check = false
            list.currentUnitPrice = list.currentUnitPrice / 100
          })
        })
      })
      this.cartList = data
    },

    // 设置观影人
    goContact() {
      uni.navigateTo({
        url: '/page_wallet/peopleList',
      })
    },
    goPage(url) {
      uni.navigateTo({
        url: url,
      })
    },
    setFun(setStatus) {
      this.setStatus = setStatus
    },
    // 切换商家选中状态
    toggleShopSelect(shopIndex, itemIndex) {
      const shop = this.cartList[shopIndex].goods[itemIndex]
      shop.check = !shop.check
      shop.selectedSpecificationGroups.forEach(
        (item) => (item.check = shop.check)
      )
      this.checkAllSelected(shopIndex)
    },

    // 切换商品选中状态
    toggleItemSelect(shopIndex, itemIndex, groupIndex) {
      const item =
        this.cartList[shopIndex].goods[itemIndex].selectedSpecificationGroups[
          groupIndex
        ]
      item.check = !item.check
      // 检查商家是否全选
      const shop =
        this.cartList[shopIndex].goods[itemIndex].selectedSpecificationGroups
      this.cartList[shopIndex].goods[itemIndex].check = shop.every(
        (item) => item.check
      )
      this.checkAllSelected(shopIndex)
    },

    // 切换全选
    toggleSelectAll() {
      this.isAllSelected = !this.isAllSelected
      this.cartList.forEach((shop) => {
        shop.check = this.isAllSelected
        shop.goods.forEach((item) => {
          item.check = this.isAllSelected
          item.selectedSpecificationGroups.forEach((row) => {
            row.check = this.isAllSelected
          })
        })
      })
    },

    // 检查是否全选
    checkAllSelected(shopIndex) {
      this.isAllSelected = this.cartList[shopIndex].goods.every(
        (shop) => shop.check
      )
    },

    // 修改商品数量
    changeQuantity(shopIndex, itemIndex, groupIndex, delta) {
      const item =
        this.cartList[shopIndex].goods[itemIndex].selectedSpecificationGroups[
          groupIndex
        ]
      if (delta == '-1' && item.amount - 1 == 0) {
        item.goodsId = this.cartList[shopIndex].goods[itemIndex].id
        this.delShop(shopIndex, itemIndex, groupIndex, item)
        return
      }
      // if(delta=='-1'&&item.amount==1){
      // 	console.log('提示删除商品？')
      // 	this.delFun(item)
      // 	return
      // }
      item.amount = item.amount + delta
    },
    delShop(shopIndex, itemIndex, groupIndex, data) {
      uni.showModal({
        title: '确认删除该商品吗？',
        content: '删除后不可恢复',
        success: (res) => {
          if (res.confirm) {
            console.log('用户点击确定')
            this.delShopApi(shopIndex, itemIndex, groupIndex, data)
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        },
      })
    },
    async delShopApi(shopIndex, itemIndex, groupIndex, param) {
      console.log('删除', param)
      uni.showLoading()
      let data = await this.$apiFun.delApi(
        this.$api.removeGoodsSpecificationApi,
        param
      )
      // 删除某个规格
      this.cartList[shopIndex].goods[
        itemIndex
      ].selectedSpecificationGroups.splice(groupIndex, 1)
      if (
        this.cartList[shopIndex].goods[itemIndex].selectedSpecificationGroups
          .length == 0
      ) {
        // 删除某个规格列表
        this.cartList[shopIndex].goods.splice(itemIndex, 1)
      }
      if (this.cartList[shopIndex].goods.length == 0) {
        // 删除所有规格列表
        this.cartList.splice(shopIndex, 1)
      }
      uni.hideLoading()
    },
    delFun(item) {
      const that = this
      uni.showModal({
        title: '确认删除该商品吗？',
        content: '删除后不可恢复',
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定')
            that.del()
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        },
      })
    },
    async del() {
      let arr = []
      this.cartList.map((shop, index) => {
        arr = shop.goods
          .filter((item) => item.check)
          .map((row) => {
            return row.id
          })
      })
      uni.showLoading()
      let data = await this.$apiFun.delApi(this.$api.removeGoodsApi, arr)
      this.init()
      uni.hideLoading()
      console.log('data', data)
    },
    leadToSetPeople() {
      const that = this
      uni.showModal({
        title: '当前还未设置观影人',
        content: '前往设置？',
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定')
            uni.navigateTo({
              url: '/page_wallet/peopleList',
            })
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        },
      })
    },
    // 跳转确认订单页面
    submit1() {
      uni.navigateTo({
        url:
          '/page_wallet/payConfirm?data=' +
          encodeURIComponent(JSON.stringify(this.cartList)),
      })
      return true
    },
    // 以前的 在当前页面进行结算
    submit() {
      const selectedItems = this.cartList.flatMap((shop) =>
        shop.goods.filter((item) => item.check)
      )
      if (selectedItems.length === 0) {
        uni.showToast({
          title: '请选择商品',
          icon: 'none',
        })
        return
      }

      // if (this.contactArr.length == 0) {
      // 	this.leadToSetPeople()
      // 	return
      // }
      // 跳转确认订单页面
      return this.submit1(this.cartList)

      // let goodsList = selectedItems.map((item) => {
      // 	let array = []
      // 	let arr = item.selectedSpecificationGroups.filter((row) => {
      // 		return row.amount > 0
      // 	}).map((i) => {
      // 		return {
      // 			specificationCondition: i.specificationCondition,
      // 			specificationItemGroup: i.specificationItemGroup,
      // 			amount: i.amount
      // 		}
      // 	})
      // 	array = array.concat(arr)
      // 	return {
      // 		goodsId: item.id,
      // 		selectedSpecificationGroups: array
      // 	}
      // })
      // console.log('goodsList----------', goodsList)
      // this.submitToCart(goodsList)
    },
    async submitToCart(goodsList) {
      let param = {
        realname: this.paramObj.name,
        goodsList: goodsList,
      }
      uni.showLoading()
      let data = await this.$apiFun.postApi(this.$api.orderCreateApi, param)

      let res = await this.$apiFun.getApi(this.$api.orderPrepayApi, {
        tradeNo: data,
      })
      // 支付api
      try {
        await this.$publicFun.payFun(res)
        uni.navigateTo({
          url: '/page_wallet/orderList?type=1',
        })
      } catch (e) {
        uni.navigateTo({
          url: '/page_wallet/orderList?type=1',
        })
      }
      uni.hideLoading()
    },
  },
}
</script>
<style>
page {
  height: 100%;
  background: #000000;
}
</style>
<style scoped lang="less">
.container {
  background: #000000;
  color: #6c6c6c;
  padding-bottom: 50rpx;

  .cart-top {
    position: fixed;
    width: 100%;
    // top:0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 110rpx;
    padding: 20rpx 35rpx 0;
    box-sizing: border-box;
    z-index: 1;
    // #ifdef H5
    top: 0;
    // #endif
    // #ifdef APP-PLUS
    top: 88rpx;
    // #endif
    // #ifdef MP-WEIXIN
    // top: 138rpx;

    // #endif
    .cart-top-l {
      font-size: 38rpx;
      color: #ffffff;
      font-weight: bold;
    }

    .cart-top-r {
      color: #ffffff;
      font-size: 28rpx;
    }

    .cart-top-r-over {
      color: #ff5000;
    }
  }
}

.arrow-icon {
  width: 10rpx;
  height: 10rpx;
  margin-left: 10rpx;
}

/* 购物车列表 */
.cart-list {
  padding: 0 20rpx;
  margin: 140rpx auto 250rpx;

  /* 商家分组 */
  .shop-group {
    margin-bottom: 20rpx;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10rpx;

    .shop-title {
      padding-left: 30rpx;
      font-size: 28rpx;
      color: rgba(255, 255, 255, 1);
      height: 80rpx;
      display: flex;
      align-items: center;

      .shop-title-title {
        font-size: 32rpx;
        display: flex;
        align-items: center;
        font-weight: bold;
        max-width: 400rpx;
        text-overflow: ellipsis;
        white-space: nowrap;

        .iconfont {
          font-size: 40rpx;
          margin-right: 10rpx;
        }
      }
    }

    /* 商家信息 */
    .shop-header {
      display: flex;
      align-items: center;
      padding: 20rpx;
    }

    /* 商家名称 */
    .shop-name {
      color: rgba(255, 255, 255, 1);
      font-size: 26rpx;
      margin-left: 10rpx;

      display: flex;
      align-items: center;

      .shop-name-title {
        font-size: 28rpx;
        max-width: 400rpx;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: bold;
      }
    }
  }

  /* 单个购物车商品项 */
  .cart-item {
    display: flex;
    align-items: flex-end;
    padding: 20rpx;
  }

  /* 选择框 */
  .checkbox {
    width: 40rpx;
    height: 40rpx;
    border: 2rpx solid #ccc;
    border-radius: 50%;
    margin-right: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 选中状态的复选框 */
  .checkbox-icon {
    font-size: 24rpx;
    color: #fff;
    background-color: #ff5000;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 商品图片 */
  .product-image {
    width: 170rpx;
    height: 170rpx;
    border-radius: 10rpx;
    border: 1rpx solid #f7f7f7;
  }

  /* 商品信息 */
  .product-info {
    // height: 170rpx;
    flex: 1;
    margin-left: 20rpx;

    .product-info-box {
      // margin-top: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  .product-title-color {
    color: rgba(255, 255, 255, 0.7);
  }

  /* 商品标题 */
  .product-title {
    display: block;
    font-size: 22rpx;
    width: 400rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(255, 255, 255, 1);
    margin-bottom: 10rpx;
  }

  .product-info-div {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    .over-list {
      width: 240rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* 数量操作 */
    .quantity-control {
      display: flex;
      align-items: center;
    }
  }

  /* 商品价格 */
  .product-price {
    font-size: 40rpx;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    margin-bottom: 10rpx;
    text-align: right;

    .price-icon {
      font-size: 20rpx;
    }
  }

  .product-price-low {
    font-size: 20rpx;
    color: rgba(255, 255, 255, 0.7);
  }
}

.quantity-btn {
  width: 50rpx;
  height: 50rpx;
  line-height: 46rpx;
  padding: 0;
  border: 2rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 32rpx;
  background: white;

  &.disabled {
    opacity: 0.6;
  }
}

.quantity {
  margin: 0 20rpx;
  font-size: 28rpx;
}

/* 底部结算栏 */
.footer {
  position: fixed;
  left: 0;
  right: 0;
  height: 150rpx;
  background-color: rgba(0, 0, 0, 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
  box-sizing: border-box;
  box-shadow: 0 -4rpx 8rpx rgba(0, 0, 0, 0.1);
  font-size: 26rpx;
  /* #ifdef MP-WEIXIN */
  bottom: 0;
  /* #endif */
  /*  #ifdef H5 */
  bottom: 100rpx;
  /* #endif */
}

.footer1 {
  position: fixed;
  left: 0;
  right: 0;
  // height: 200rpx;

  display: flex;
  align-items: center;
  height: 150rpx;
  background-color: rgba(0, 0, 0, 1);
  padding: 0 20rpx;
  box-sizing: border-box;
  box-shadow: 0 -4rpx 8rpx rgba(0, 0, 0, 0.1);
  font-size: 26rpx;
  /* #ifdef MP-WEIXIN */
  bottom: 0;
  /* #endif */
  /*  #ifdef H5 */
  bottom: 100rpx;

  /* #endif */
  .footer1-box-b {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .footer1-box-l {
    width: 100%;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: #fff;
    margin-top: 10rpx;

    .footer1-box-l-t {
      flex: 1;
      margin-bottom: 15rpx;

      .footer1-box-l-t-text {
        color: #e64340;
      }
    }

    .footer1-box-l-b {
      width: 300rpx;
      display: flex;
      align-items: baseline;
      white-space: nowrap;
      justify-content: flex-end;

      .arrow-icon {
        width: 10rpx;
        height: 10rpx;
        margin-left: 10rpx;
      }
    }
  }
}

/* 全选 */
.select-all {
  width: 150rpx;
  height: 40rpx;
  margin-right: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 1);

  .checkbox-txt {
    white-space: nowrap;
  }

  /* 选择框 */
  .checkbox {
    width: 40rpx;
    height: 40rpx;
    border: 2rpx solid #ccc;
    border-radius: 50%;
    margin-right: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 选中状态的复选框 */
  .checkbox-icon {
    font-size: 24rpx;
    color: #fff;
    background-color: #ff5000;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* 总价 */
.total-price {
  flex: 1;
  font-size: 26rpx;
  color: rgba(255, 255, 255, 1);
  display: flex;
  justify-content: flex-end;
  align-items: center;

  .product-price {
    font-size: 20rpx;
    color: #e64340;
    font-weight: bold;

    .plan-price-text {
      font-size: 30rpx;
      margin: 0 5rpx;
    }
  }
}

/* 结算按钮 */
.submit-btn {
  background-color: #ff5000;
  color: #fff;
  font-size: 30rpx;
  border-radius: 6rpx;
  width: 150rpx;
  height: 70rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10rpx;
}
</style>